<template>
	<div :style="'padding-bottom: 20%;' + 'height:' + height">
		<div class="top-wrapper">
			<div class="top-content-wrapper">
				<div class="left-icon">
					<van-image src="https://img2.baidu.com/it/u=1429175118,2649084526&fm=26&fmt=auto"></van-image>
				</div>
				<div class="right-wrapper">
					<div class="right-top">
						<div class="left">
							<span class="name">Summer</span>
							<div class="medal"></div>
						</div>
						<div>
							<van-image
								src="https://img12.360buyimg.com/img/s40x40_jfs/t1/125926/3/7446/2181/5f15510bE3f46d483/4f25fadf9ebe91d3.png"
								height="20" width="20"></van-image>
						</div>
					</div>
					<div class="right-center">
						<div class="label1">购物积分</div>
						<div class="labeln">信用分999</div>
					</div>
				</div>
			</div>
			<div class="assets-wrapper">
				<div class="assets-item">
					<span class="assets-value">3</span>
					<span class="assets-title">商品收藏</span>
				</div>
				<div class="assets-item">
					<span class="assets-value">18</span>
					<span class="assets-title">商品收藏</span>
				</div>
				<div class="assets-item">
					<span class="assets-value">0</span>
					<span class="assets-title">我的足迹</span>
				</div>
			</div>
			<div class="banner-wrapper">
				<div class="banner-left">
					<div class="left-icon">
						<van-image class="icon"
							src="https://img12.360buyimg.com/img/s113x21_jfs/t1/132167/33/1122/2973/5ed5c74bE41e02c41/5ae83d09fff874cb.png"
							width="90%" height="12"></van-image>
					</div>
					<div class="center-text">
						<span>|</span>
					</div>
					<div>
						<span>免费试用 立领一张运费卷</span>
					</div>
				</div>
				<div class="banner-right-btn">
					0元试用
				</div>
			</div>
			<div class="menu" ref="menu" @click="test()">
				<div class="menu1-item">
					<div class="menu1-content">
						<van-image
							src="https://img12.360buyimg.com/img/s60x60_jfs/t1/125209/17/7530/933/5f16524bE43b4a5f7/71971b102d1fcbc5.png"
							width="25" height="25"></van-image>
						<span class="menu1-text">待付款</span>
					</div>
					<div class="menu1-content">
						<van-image
							src="https://img12.360buyimg.com/img/s120x120_jfs/t1/123660/33/7797/4674/5f1804aeE308173db/b392f9ce63eb8490.png"
							width="25" height="25"></van-image>
						<span class="menu1-text">待收货</span>
					</div>
					<div class="menu1-content">
						<van-image
							src="https://img12.360buyimg.com/img/s60x60_jfs/t1/120478/38/7592/2211/5f165256E02190e99/1491d4cb340074bb.png"
							width="25" height="25"></van-image>
						<span class="menu1-text">退换/售后</span>
					</div>
					<div class="menu1-content">
						<van-image
							src="https://img12.360buyimg.com/img/s60x60_jfs/t1/145618/2/3439/692/5f16525eE30cd2db1/3ab434ec2686a256.png"
							width="25" height="25"></van-image>
						<span class="menu1-text">全部订单</span>
					</div>
				</div>
				<div class="menu2-item">
					<div class="menu2-content">
						<span class="menu2-value">36</span>
						<span class="menu2-text">优惠券</span>
					</div>
					<div class="menu2-content">
						<span class="menu2-value-text">开通有礼</span>
						<span class="menu2-text">白条</span>
					</div>
					<div class="menu2-content">
						<span class="menu2-value">520</span>
						<span class="menu2-text">京豆</span>
					</div>
					<div class="menu2-content">
						<span class="menu2-value">0</span>
						<span class="menu2-text">红包</span>
					</div>
					<div class="menu2-content">
						<div class="menu2-icon">
							<van-image
								src="https://img12.360buyimg.com/img/s60x62_jfs/t1/124603/26/7654/1293/5f16621fE5203989a/ac40297eb801ec8d.png"
								width="25" height="25" class="icon"></van-image>
						</div>
						<span class="menu2-text">全部订单</span>
					</div>
				</div>
				<div class="menu3-item">
					<div class="menu3-title">
						<span class="title">工具与服务</span>
					</div>
					<div class="menu3-content">
						<div class="menu3-item">
							<div class="menu3-icon">
								<van-image
									src="https://img12.360buyimg.com/img/s70x70_jfs/t1/135809/4/7014/5528/5f35369dE8aff3fab/f4b952a87ea33ae4.png.webp">
								</van-image>
							</div>
							<span class="menu3-text">客户服务</span>
						</div>
						<div class="menu3-item">
							<div class="menu3-icon">
								<van-image
									src="https://img12.360buyimg.com/img/s70x70_jfs/t1/143427/38/5400/4413/5f350384Edba4458b/bfcb210d2110a7d8.png.webp">
								</van-image>
							</div>
							<span class="menu3-text">我的预约</span>
						</div>
						<div class="menu3-item">
							<div class="menu3-icon">
								<van-image
									src="https://img12.360buyimg.com/img/s70x70_jfs/t1/138657/15/5351/5178/5f3504ceE3707cfd0/bc8ff48c8edcc5b1.png.webp">
								</van-image>
							</div>
							<span class="menu3-text">我的问答</span>
						</div>
						<div class="menu3-item">
							<div class="menu3-icon">
								<van-image
									src="https://img12.360buyimg.com/img/s70x70_jfs/t1/112188/32/14787/4956/5f3509edE376c2ddb/d716c6822cafa2b6.png.webp">
								</van-image>
							</div>
							<span class="menu3-text">闲置换钱</span>
						</div>
						<div class="menu3-item">
							<div class="menu3-icon">
								<van-image
									src="https://img12.360buyimg.com/img/s70x70_jfs/t1/126073/34/9502/6741/5f350800Ee00c0d35/43485badf62439e9.png.webp">
								</van-image>
							</div>
							<span class="menu3-text">高价回收</span>
						</div>
					</div>
				</div>
				<ProductList :productList="productList"></ProductList>
			</div>
		</div>
	</div>
</template>

<script>
	import ProductList from '@/components/ProductList.vue'
	export default {
		data() {
			return {
				height: '0px',
				productList: [{
						img: require('@/assets/home/productiList/1.jpg'),
						describe: '飞利浦（PHILIPS）SBM230无线喇叭小蜜蜂扩音器UHF麦克风便携音箱教师导游培训讲师消噪播放器象牙白',
						productId: 1,
						price: 99.00,
						isActivity: true,
						activityName: '闪购',
						isAutarky: true
					},
					{
						img: 'https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/192542/29/16208/186965/61064c0fE98709df9/3abbcd6917f382d4.jpg!q70.dpg.webp',
						describe: '格子兮老爹鞋女春季韩版2021新款网红炸街透气夏季运动休闲小白潮鞋椰子鞋飞织 黑色 40',
						productId: 1,
						price: 16.80,
						isActivity: false,
						isAutarky: false,
						discountPrice: 12.88,
						isDiscount: true
					},
					{
						img: 'https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/138907/26/22713/123989/618a5f5fE4b090381/7a03143c5b0ef819.jpg!q70.dpg.webp',
						describe: '展昂黑白卡通暴力熊钥匙扣黑白绳挂件汽车配件包包挂饰 一个',
						productId: 1,
						price: 199.00,
						isActivity: false,
						isAutarky: false
					},
					{
						img: 'https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/211492/32/6958/153965/617900daE578c96b3/1cd0e97de6e223f8.jpg!q70.dpg.webp',
						describe: '二棉鞋男冬季2021新款加绒加厚保暖居家用防滑无后跟包头洞洞拖鞋 米色 39',
						productId: 1,
						price: 2423.00,
						isActivity: true,
						activityName: '拼购',
						isAutarky: false
					},
					{
						img: 'https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/155704/32/23779/106019/618ce01fE3e320f67/85141b61f6a5196e.jpg!q70.dpg.webp',
						describe: '十月结晶小小梦想家婴儿纸尿裤NB码-42片（出生-5kg） 干爽透气宝宝尿不湿',
						productId: 1,
						price: 8888.00,
						isActivity: true,
						activityName: '新品',
						isAutarky: true
					}
				],
			}
		},
		mounted() {
			this.getMenuHeight()
		},
		components: {
			ProductList
		},
		watch:{
			productList() {
				//商品列表数据发生变化时更新容器高度
				this.getMenuHeight()
			}
		},
		computed: {
			
		},
		methods: {
			getMenuHeight() {
				this.$nextTick(() => {
					//获取该元素高度
					let menuHeight = parseInt(window.getComputedStyle(this.$refs.menu).height)
					//获取该元素距离顶部的距离
					let topHeight = this.$refs.menu.offsetTop
					//计算容器真实高度
					this.height = menuHeight + topHeight + 'px'
				})
			},
			test() {
				this.productList.push({
						img: require('@/assets/home/productiList/1.jpg'),
						describe: '飞利浦（PHILIPS）SBM230无线喇叭小蜜蜂扩音器UHF麦克风便携音箱教师导游培训讲师消噪播放器象牙白',
						productId: 1,
						price: 99.00,
						isActivity: true,
						activityName: '闪购',
						isAutarky: true,
						discountPrice: 88.88,
						isDiscount: true
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-wrapper {
		height: 200px;
		background-image: url('https://img12.360buyimg.com/img/s1500x886_jfs/t1/115726/22/13102/240974/5f18fb83Ee40e230b/d4f2a67087fd443a.png');
		background-size: 100% 100%;
		padding: 10px 20px;
		position: relative;

		.top-content-wrapper {
			display: flex;

			.left-icon {
				border-radius: 50%;
				overflow: hidden;
				width: 60px;
				height: 60px;
			}

			.right-wrapper {
				display: flex;
				flex-direction: column;
				margin-left: 30px;
				flex: 1;
				margin-top: 5px;

				.right-top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						display: flex;
						align-items: center;

						.name {
							font-size: 18px;
							color: #FFFFFF;
						}

						.medal {
							background-image: url('https://img12.360buyimg.com/img/s300x60_jfs/t1/113596/13/13099/22116/5f1a4bddEb7f1a190/8581e1b9765e15ff.png');
							background-position: 48px 0px;
							height: 16px;
							width: 16px;
							background-size: cover;
							margin-left: 10px;
						}
					}
				}

				.right-center {
					display: flex;
					margin-top: 10px;

					.label1 {
						color: #FFFFFF;
						font-size: 12px;
						padding: 2px 5px;
						background-color: rgba(0, 0, 0, .16);
						border-radius: 50px;
					}

					.labeln {
						color: #FFFFFF;
						font-size: 12px;
						padding: 2px 5px;
						background-color: rgba(0, 0, 0, .16);
						border-radius: 50px;
						margin-left: 10px;
					}
				}
			}
		}

		.assets-wrapper {
			display: flex;
			margin-top: 20px;

			.assets-item {
				display: flex;
				flex-direction: column;
				flex: 1;

				.assets-value {
					flex: 1;
					text-align: center;
					color: #FFFFFF;
					font-weight: 600;
				}

				.assets-title {
					flex: 1;
					text-align: center;
					color: #FFFFFF;
					font-size: 12px;
					line-height: 30px;
				}
			}
		}

		.banner-wrapper {
			width: calc(100% - 40px);
			height: 45px;
			position: absolute;
			bottom: 30px;
			background-image: url('https://img12.360buyimg.com/img/s678x99_jfs/t1/112839/2/12981/33105/5f17e12aE602bb83e/8a736742745d79cf.png');
			background-size: cover;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.banner-left {
				display: flex;
				align-items: center;
				font-size: 12px;
				color: #ffe678;

				.left-icon {
					margin-left: 10px;

					.icon {
						vertical-align: middle;
					}
				}

				.center-text {
					padding: 0 10px;
				}
			}

			.banner-right-btn {
				background-color: #F6D44E;
				font-size: 12px;
				padding: 2px 10px;
				border-radius: 50px;
				margin-right: 10px;
			}

			.banner-right-btn:after {
				content: "";
				display: inline-block;
				vertical-align: middle;
				border-left: 3px solid #262626;
				border-top: 3px solid transparent;
				border-bottom: 3px solid transparent;
				margin-left: 4px;
				margin-bottom: 2px;
			}
		}

		.menu {
			width: 100%;
			position: absolute;
			top: 190px;
			left: 0;
			right: 0;

			.menu1-item {
				border-radius: 10px;
				padding: 20px 50px;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FFFFFF;
				margin-bottom: 15px;

				.menu1-content {
					display: flex;
					flex-direction: column;
					align-items: center;

					.menu1-text {
						font-size: 12px;
					}
				}
			}

			.menu2-item {
				border-radius: 10px;
				padding: 20px 30px 20px 50px;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FFFFFF;
				margin-bottom: 15px;

				.menu2-content {
					display: flex;
					flex-direction: column;
					align-items: center;

					.menu2-value {
						font-size: 22px;
						font-weight: 600;
						line-height: 30px;
					}

					.menu2-value-text {
						font-size: 14px;
						font-weight: 600;
						line-height: 30px;
					}

					.menu2-text {
						font-size: 12px;
					}

					.menu2-icon {
						line-height: 30px;

						.icon {
							vertical-align: sub;
						}
					}
				}
			}

			.menu3-item {
				border-radius: 10px;
				padding: 6px 10px;
				box-sizing: border-box;
				background-color: #FFFFFF;

				.menu3-title {
					padding-bottom: 10px;
					border-bottom: 1px solid #dddddd;

					.title {
						font-size: 14px;
						font-weight: 600;
					}
				}

				.menu3-content {
					display: flex;
					flex-wrap: wrap;
					align-items: center;

					.menu3-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						flex: 0 0 25%;

						.menu3-icon {
							width: 35px;
							height: 35px;
							padding: 10px 0;
						}

						.menu3-text {
							font-size: 12px;
						}
					}
				}
			}
		}
	}
</style>
